<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>练多多注册</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="img/favicon.ico">
<link href="../css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="../css/animate.css" rel="stylesheet">
<link href="../css/style.css?v=4.0.0" rel="stylesheet">
  <style>
  	html,body{
    width:100%;
    height:100%
	}
	body{
  	font-family: "微软雅黑";
 	background:url("../img/register.png") no-repeat;
  	background-size: 100%;
	}
	.error{
	color:red;
	}
    .form-group{
      display: flex;
      width: 360px;
      margin-left: -50px;
      position: relative;
    }
    .form-group:nth-last-of-type(1){
      margin-left: 0;
    }
    .form-group input{
      width: 260px;
    }
    .form-group span{
      line-height: 34px;
      width: 82px;
      text-align: right;
      margin-right: 10px;
    }
    .form-group .tip{
      position: absolute;
      top: 0;
      left: 360px;
      width: 200px;
      text-align: left;
      color: red;
      line-height: 34px;
    }
    .form-group .tip-agree{
      top: -6px;
      left: 140px;
    }
    .form-group .tip-email{
      left: 470px;
    }
  </style>
<base target="_blank">
<script>
	if (window.top !== window.self) {
		window.top.location = window.location;
	}
	function login() {
	    location.href = "/user/login.html";
	    return false
	}
	function register() {
	    location.href = "/user/register.html";
	    return false
	}
</script>

</head>

<body class="gray-bg">

	<div class="middle-box text-center loginscreen   animated fadeInDown">
		<div>
			<div>

				<h1 class="logo-name">LDD</h1>

			</div>
			<h3>欢迎注册练多多</h3>
			<form class="m-t" role="form" id="signupForm">
			
                <div class="form-group"><span>用户名:</span>
                    <input type="text" class="form-control" placeholder="请输入用户名" name="username" id="username">
                  <span class="tip"><label id="msg_username" for="username"></label></span>
                </div>
                <div class="form-group"><span>用户密码:</span>
                    <input type="password" class="form-control" placeholder="请输入密码" name="password" id="password">
                  <span class="tip"><label for="password"></label></span>
                </div>
                <div class="form-group"><span>再次输入密码:</span>
                    <input type="password" class="form-control" placeholder="请再次输入密码" name="confirm_password" id="confirm_password">
                  <span class="tip"><label for="confirm_password"></label></span>
                </div>
                <div class="form-group"><span>手机号:</span>
                    <input type="text" class="form-control" placeholder="请输入手机" name="phone" id="phone">
                  <span class="tip"><label for="phone"></label></span>
                </div>
                <div class="form-group" ><span>邮箱:</span>
                    <input type="text" class="form-control" placeholder="请输入邮箱" name="email" id="email">
                  <span class="tip"><label for="email"></label></span>
                  <!-- <a href="javascript:;" class="email-a">发送邮箱验证</a> -->
                </div>
                <div class="form-group text-left">
                    <div class="checkbox i-checks">
                        <span class="no-padding">
                            <input type="checkbox" name="agree" id="agree"><i></i> 我同意注册协议</span>
                    	<span><label for="agree"></label></span>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary block full-width m-b btn-sumit" id="regsSubmit">注 册</button>

                <p class="text-muted text-center"><small>已经有账户了？</small><a href="login.html" target="_self">点此登录</a>
                </p>

            </form>
		</div>
	</div>

	<!-- 全局js -->
	<script src="../js/jquery.min.js?v=2.1.4"></script>
	<script src="../js/bootstrap.min.js?v=3.3.5"></script>
	<!-- iCheck -->
	<script src="../js/plugins/iCheck/icheck.min.js"></script>
	<script src="../js/jquery.validate.min.js"></script>
	<script src="../js/messages_zh.js"></script>
	<script>
	$(document).ready(function() {
		$('.i-checks').iCheck({
			checkboxClass : 'icheckbox_square-green',
			radioClass : 'iradio_square-green',
		});
	});
	var isUserOk=false;
	//以下为所有验证成功后的注册提交事件
	$.validator.setDefaults({
	    submitHandler: function() {
	      alert("提交事件!");
	      if(!isUserOk){
	    	  $("#msg_username").html("");
	    	//var msg="用户名重复";
	    	//拿到input输入框的值
				$("#msg_username").css("color","red");
				var userName=$("#msg_username").val();
				var usertxt=$.trim(userName);
				var reg=/^[a-zA-Z]\w*$/;
				$("#msg_username").html("");
				// 需要做非空验证
				if(usertxt==""){
					var msg="用户名不能为空";
					$("#msg_username").html(msg);
				}else if(!userName.match(reg)){
					var msg="首位必须为字母";
					$("#msg_username").html(msg);
				}else if(userName.length<2){
					var msg="用户名不能小于两个字";
					$("#msg_username").html(msg);
				}
      		//$("#msg_username").html(msg);
	      }else{
	      alert($("#signupForm").serialize());
	      $.ajax({
				type : "POST",
				url : "/user/doRegister",
				contentType : "application/x-www-form-urlencoded; charset=utf-8",
				data : $("#signupForm").serialize(),
				success : function(result) {
						var obj = eval(result);
						alert(obj.status);
						if (obj.status==200) {
							//$.messager.alert("激活邮件已发送至您的邮箱 !请登录邮箱,完成最终注册激活!");
							alert(obj.msg);
							login();
							return;
						}else if(obj.status==201){
							alert(obj.msg);
						}
				},
				error:function(){
					register();
					return;
				}
			});
	      }
	    }
	});
	$().ready(function() {
		// 在键盘按下并释放及提交后验证提交表单
		  $("#signupForm").validate({
		    rules: {
		  //      username: {
		  //      required: true,
		  //      minlength: 2
		  //    },
		      password: {
		        required: true,
		        minlength: 5
		      },
		      confirm_password: {
		        required: true,
		        minlength: 5,
		        equalTo: "#password"
		      },
		      email: {
		        required: true,
		        email: true
		      },
		      phone: {
		        required: true,
		        digits:true,
		        minlength: 11,
		        maxlength: 11
		      },
		      agree: "required"
		    },
		    errorPlacement: function(error, element) {
				// Append error within linked label
				$( element )
					.closest( "form" )
						.find( "label[for='" + element.attr( "id" ) + "']" )
							.append( error );
			},
			errorElement: "span",
			//以下为消息信息
		    messages: {
		  //      username: {
		  //      required: "用户名不能为空",
		   //     minlength: "用户名不能小于两个字"
		   //   },
		      password: {
		        required: "密码不能为空",
		        minlength: "密码长度不能小于 5 个字"
		      },
		      confirm_password: {
		        required: "确认密码不能为空",
		        minlength: "密码长度不能小于 5 个字",
		        equalTo: "两次密码输入不一致"
		      },
		      phone: {
			    required: "手机号不能为空",
			    minlength: "请输入正确的11位手机号",
			    maxlength: "请输入正确的11位手机号"
			  },
		      email: "请输入一个正确的邮箱",
		      agree: "请接受我们的声明",
		     }
		    });
		});
	
	 //以下为ajax验证单项
	 $(function(){
		// 实现AJAX验证用户名是否可用
		$("#username").blur(function(){
			//拿到input输入框的值
			$("#msg_username").css("color","red");
			var userName=$(this).val();
			var usertxt=$.trim(userName);
			isUserOk=false;
			var reg=/^[a-zA-Z]\w*$/;
			$("#msg_username").html("");
			// 需要做非空验证
			if(usertxt==""){
				var msg="用户名不能为空";
				$("#msg_username").html(msg);
				return;
			}else if(!userName.match(reg)){
				var msg="首位必须为字母";
				$("#msg_username").html(msg);
				return;
			}else if(userName.length<2){
				var msg="用户名不能小于两个字";
				$("#msg_username").html(msg);
				return;
			}
			// 如果不为空,再发AJAX请求验证用户名是否重复
			 $.post('/user/checkUsername',//url 
					{ 
				 		username : $("#username").val(), 
				    }, 
				    function(result) {
				    	if(result.data){
				    		var msg="用户名重复";
				    		$("#msg_username").html(msg);
				    	}else{
				    		var msg="用户名未被注册";
				    		$("#msg_username").css("color","green").html(msg);
				    		isUserOk=true;
				    	}
					}); 
			});
		}); 
	</script>
</body>
</html>